<template>
  <div class="v-attr-constain-table">
    <div
      class="g-toolbar-between"
      :class="[$global.isIpcWindow ? '_BackGroundWhite is_ipc' : '__BackGroundGrey']"
    >
      <div class="g-toolbar-left">
        <span
          class="g-img-box"
          :class="{ '_sort-active': attributeTabsModel.constraintsPaneModel.sortByNameActive }"
          @click="attributeTabsModel.constraintsPaneModel.toggleSortByNameActive()"
        >
          <img src="statics/icons/app/textsort.svg" />
        </span>
      </div>
    </div>

    <div class="_attribute-content g-fd-c">
      <PropertyConstrainTable
        :key="data.modelData?.id"
        :constraintData="visibleTableData"
        :modelId="data.modelData?.id"
        class="g-flex-1"
      />
    </div>
  </div>
</template>
<script lang="ts" setup>
import { computed } from "vue";
import PropertyConstrainTable from "./PropertyConstraintTable.vue";
// const attributeTabsModel = app.activeProject!.attributeTabsModel;
const attributeTabsModel = computed(() => app.activeProject!.attributeTabsModel);

const data = computed(() => {
  return app.activeProject!.attributeTabsModel.data;
});
const visibleTableData = computed(() => {
  return attributeTabsModel.value.constraintsPaneModel.getVisibleTableData();
});
</script>
<style lang="scss">
@import "@/assets/css/theme.scss";
.v-attr-constain-table {
  display: flex;
  padding: 0 0px;
  flex-direction: column;
  height: 100%;
  overflow: hidden;
  ._attribute-content {
    flex: 1;
    height: 100px;
    background-color: white;
    .el-input__inner {
      box-shadow: none;
      height: 24px;
    }
  }
  .el-input__wrapper {
    box-shadow: none;
  }
  .el-input.is-disabled .el-input__wrapper {
    box-shadow: none;
  }
}
</style>
